<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <script src="./js/vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <el-container>
        <!-- 头部-->
        <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>

        <!-- 中间部分 -->
        <el-container style="border: 1px solid #eee">
            <!--侧边栏-->
            <el-aside width="230px" style="border: 1px solid #eee">
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                        <el-menu-item index="1-1">学生管理</el-menu-item>
                        <el-menu-item index="1-2">教师管理</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 主区域部分 -->
            <el-main>
                <div style="float: left;">
                    <el-button type="primary" @click="showAddStu()">添加学生</el-button>
                </div>

                <!--表格-->
                <el-table :data="tableData">
                    <el-table-column prop="id" label="学号" width="120"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                    <el-table-column prop="birthday" label="生日" width="140"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="props">
                            <el-button type="warning" @click="showEditStu(props.row)">编辑</el-button>
                            <el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--添加框-->
                <el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4Add" @close="resetForm('addForm')">
                    <el-form :model="formData" ref="addForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="学生学号" prop="id">
                            <el-input v-model="formData.id"></el-input>
                        </el-form-item>
                        <el-form-item label="学生姓名" prop="name">
                            <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="学生生日" prop="birthday">
                            <!--v-model : 双向绑定 -->
                            <el-input v-model="formData.birthday" type="date"></el-input>
                        </el-form-item>
                        <el-form-item label="学生地址" prop="address">
                            <el-input v-model="formData.address"></el-input>
                        </el-form-item>
                        <el-form-item align="right">
                            <el-button type="primary" @click="addStudent()">添加</el-button>
                            <el-button @click="resetForm('addForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                <!--修改框-->
                <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4Edit" @close="resetForm('editForm')">
                    <el-form :model="editFormData" ref="editForm" label-width="100px"
                             class="demo-ruleForm">
                        <el-form-item label="学生学号" prop="id">
                            <el-input v-model="editFormData.id" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="学生姓名" prop="name">
                            <el-input v-model="editFormData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="学生生日" prop="birthday">
                            <!--v-model : 双向绑定 -->
                            <el-input v-model="editFormData.birthday" type="date"></el-input>
                        </el-form-item>
                        <el-form-item label="学生地址" prop="address">
                            <el-input v-model="editFormData.address"></el-input>
                        </el-form-item>

                        <el-form-item align="right">
                            <el-button type="warning" @click="updateStudent()">修改</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
			baseURL:"",
            dialogTableVisible4Add: false,  //添加窗口显示状态
            dialogTableVisible4Edit: false, //编辑窗口显示状态
            formData: {},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData: []//表格数据
        },
        methods: {
            //查询列表
            findList() {
                axios.get(this.baseURL+"/studentServlet").then(resp => {
                    this.tableData = resp.data;
                });
            },

            //打开添加框
            showAddStu() {
                this.dialogTableVisible4Add = true;

                console.log("打开添加框");
            },

            //添加学生
            addStudent() {
                axios.post(this.baseURL+"/studentServlet", this.formData).then(resp => {
                    if (resp.data == 'OK') {
                        //1. 清空表单
                        this.formData = {};

                        //2. 关闭弹框
                        this.dialogTableVisible4Add = false;

                        //3. 重新查询
                        this.findList();
                    }
                })
            },
            //修改学生
            updateStudent() {
                axios.put(this.baseURL+"/studentServlet", this.editFormData).then(resp => {
                    if (resp.data == 'OK') {
                        //1. 清空表单
                        this.editFormData = {};

                        //2. 关闭弹框
                        this.dialogTableVisible4Edit = false;

                        //3. 重新查询
                        this.findList();
                    }
                })
            },

            //打开编辑框
            showEditStu(row) {
                this.dialogTableVisible4Edit = true;
                axios.get(this.baseURL+"/studentServlet/" + row.id).then(resp => {
                    this.editFormData = resp.data;
                })
                console.log("打开编辑框");
            },

            //删除学生
            deleteStu(row) {
                axios.delete(this.baseURL+"/studentServlet/" + row.id).then(resp => {
                    if (resp.data == 'OK') {
                        this.findList();
                    }
                })
            },

            //重置
            resetForm() {
                this.formData = {};
                this.editFormData = {};
            },

        },
        mounted() {
            //当页面加载完毕之后,就要触发获取学生列表的方法
            this.findList();
        }

    });
</script>
</html>
